<template>
	<view class="ynq-Location">
		<!-- 字母区域 -->
		<view v-if="currSelect.value==1" class="ynq-Letter">
			<view hover-class="Click-Latter" @tap="getLetter('ScrollTop')">*</view>
			<view v-for="(l,i) in LatterName" :key="i" hover-class="Click-Latter" @tap="getLetter(l)">{{l}}</view>
		</view>
		<view class="search">
			<u-search :hide-right="true" :show-action="true" :action-text="currSelect.label" @custom="selectShow=true"
				v-model="keyword" @search="searchinput">
			</u-search>
		</view>
		<view class="ynq-AutoLocation flex">
			<view class="ynq-AutoAddress">
				<text class="ynq ynq-dizhi"></text>
				<text>当前定位：</text>
				<text>{{CityName}}</text>
			</view>
			<!-- <view class="ynq-ReLocation">
				<text class="ynq ynq-ditudingwei"></text>
				<text @click="getLocations">重新定位</text>
			</view> -->
		</view>

		<scroll-view scroll-y="true" class="ynq-ScrollView" :scroll-into-view="LetterId">
			<!-- 热门城市 -->
			<!-- <view class="ynq-HotCity" id="ScrollTop">
				<view class="ynq-HotCityTitle">
					<text class="ynq ynq-fire"></text>
					<text>热门城市</text>
				</view>
	
				<view class="ynq-HotCityList flex">
					<text class="radius-3" @tap="getStorage(item)" v-for="(item,index) in HotCity"
						:key="index">{{item}}</text>
				</view>
			</view> -->

			<!-- 城市列表 -->
			<view class="ynq-CityList">
				<template v-if="currSelect.value==1">
					<view v-for="(item) in CityList" :key="item.initial">
						<view class="ynq-CityLetter" :id="item.initial">{{item.initial}}</view>
						<view class="ynq-CityLine">
							<view @tap="getStorage(item_city)" v-for="(item_city) in item.list" :key="item_city.id">
								<text>{{item_city.city_name}}({{getDetailAdd(item_city)}})</text>
								<text style="color: var(--primary-color);">{{item_city.juli}}</text>
							</view>
						</view>
					</view>
				</template>
				<view v-else>
					<view class="ynq-CityLine">
						<view @tap="getStorage(item_city)" v-for="(item_city) in CityList" :key="item_city.id">
							<text>{{item_city.city_name}}({{getDetailAdd(item_city)}})</text>
							<text style="color: var(--primary-color);">{{item_city.juli}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-select v-model="selectShow" :list="selectList" @confirm="e=>{currSelect=e[0];position()}"></u-select>
	</view>

</template>

<script>
	import {
		searchPosition,
		postLocation,
	} from '@/api/position.js'
	import {
		data
	} from '@/components/uview-ui/libs/mixin/mixin';
	const selectList = [{
		label: '筛选',
		value: 0
	}, {
		label: '按字母',
		value: 1
	}, {
		label: '按距离',
		value: 2
	}]
	export default {
		data() {
			return {
				locationName: '',
				citylists: [],
				// cityname: [],
				keyword: "",
				// CityName:'浙江',
				CityName: "",
				HotCity: ['北京', '深圳', '上海', '成都', '广州', '金华'],
				LatterName: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				CityList: {}, //引用json数据
				LetterId: '',
				lat: '',
				lng: '',
				selectShow: false,
				currSelect: selectList[0],
				selectList: selectList,
			}
		},
		created() {
			var _this = this
			uni.getStorage({
				key: "City_Name",
				success: function(res) {
					console.log(res)
					_this.CityName = res.data
				}
			})
			uni.getStorage({
				key: "City_lat",
				success: function(res) {
					console.log(res)
					console.log(_this, 999)
					_this.lat = res.data
				}
			})
			uni.getStorage({
				key: "City_lng",
				success: function(res) {
					console.log(res)
					_this.lng = res.data
				}
			})
		},
		onLoad(option) {

		},
		onShow() {

			// uni.getStorageInfo({	
			// 	success: function (res) {
			// 		console.log(res);
			// 		console.log(res.City_Name);
			// 		console.log(res.City_lat);
			// 		console.log(res.City_lng);
			// 	}
			// });
		},
		mounted() {
			this.position()
		},
		methods: {
			getDetailAdd(item) {
				let temp = '';
				if (item.name) {
					if (item.name.province) {
						temp += item.name.province.city_name
					}
					if (item.name.city) {
						if (temp)
							temp += '-'
						temp += item.name.city.city_name
					}
					if (item.name.county) {
						if (temp)
							temp += '-'
						temp += item.name.county.city_name
					}
				}
				return temp
			},
			searchinput() {
				this.CityList = [];
				uni.showLoading({
					title: '加载中...'
				});
				let _that = this;
				searchPosition({
					keyword: _that.keyword,
					lat: this.lat,
					lng: this.lng,
					type: this.currSelect.value,
				}).then(res => {
					if (res.code != 1) return;
					_that.CityList = res.data.list
					uni.hideLoading()
				})
			},
			//提交位置信息
			position() {
				if (this.keyword)
					this.searchinput();
				this.CityList = [];
				uni.showLoading({
					title: '加载中...'
				});
				let data = {
					lat: this.lat,
					lng: this.lng,
					type: this.currSelect.value,
				}
				postLocation(data).then(res => {
					if (res.code != 1) return;
					this.CityList = res.data.list
					uni.hideLoading();
				})
			},
			//获取定位点
			getLetter(name) {
				this.LetterId = name
				uni.pageScrollTo({
					selector: '#' + name,
					duration: 300
				})
			},
			//存储城市缓存
			getStorage(Name) {
				uni.setStorage({
					key: 'City_Name',
					data: Name.city_name
				})
				uni.setStorage({
					key: 'City_lat',
					data: Name.lat
				})
				uni.setStorage({
					key: 'City_lng',
					data: Name.lng
				})
				//跳转返回
				uni.navigateBack({
					url: '/pages/index/index'
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.search {
		width: 92%;
		margin-left: 4%;
		margin-top: 10rpx;
		margin-bottom: 10rpx;

	}

	.ynq-Location {
		height: 100vh;
	}

	.ynq-AutoLocation {
		width: calc(100% - 40rpx);
		background: rgba(250, 250, 250, .5);
		padding: 20rpx 20rpx;

		text.ynq {
			font-size: 32rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 30rpx;
		}
	}

	.ynq-HotCity {
		padding: 20rpx;
	}

	.ynq-HotCityTitle {
		padding: 0rpx 0rpx;

		text.ynq {
			margin-right: 10rpx;
			color: #ff0000;
			font-size: 32rpx;
		}

		text {
			font-size: 30rpx;
		}
	}

	.ynq-HotCityList {
		padding: 20rpx 20rpx 20rpx 0;
		flex-wrap: wrap !important;

		text {
			width: 32%;
			display: inline-block;
			text-align: center;
			background: rgba(200, 200, 200, .2);
			margin-bottom: 10rpx;
			font-size: 26rpx;
			padding: 20rpx 0;
		}
	}

	.ynq-Letter {
		position: fixed;
		right: 5rpx;
		top: 180rpx;
		width: 30rpx;
		z-index: 100;

		view {
			display: block;
			width: 30rpx;
			text-align: center;
			height: 35rpx;
			line-height: 35rpx;
			font-size: 22rpx;
			transition: ease .3s;
			-webkit-transition: ease .3s;
		}
	}

	.ynq-CityList {
		padding: 0px 40rpx 0 20rpx;

		.ynq-CityLetter {
			line-height: 30rpx;
			height: 40rpx;
			font-size: 24rpx;
			border-bottom: 1px solid #f7f7f7;
			padding-left: 10rpx;
			color: #909090;
		}

		.ynq-CityLine {
			margin: 20rpx 0px;

			&>view {
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 60rpx;
				padding: 0px 10rpx;
				font-size: 30rpx;
				color: #767676;

				&:nth-child(even) {
					background-color: rgba(200, 200, 200, .12);
				}
			}
		}
	}

	.ynq-ScrollView {
		height: calc(100vh - 160rpx);
	}

	.Click-Latter {
		font-size: 30rpx !important;
	}
</style>